<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../static/static/css/font.css">
    <link rel="stylesheet" href="../static/static/css/weadmin.css">
    <script src="../static/lib/layui/layui.js" charset="utf-8"></script>
</head>
<body>
<br>
<fieldset class="layui-elem-field">
    <legend>商品详情</legend>
    <div class="layui-field-box">
        以下表单为商品的基础信息
    </div>
</fieldset>
<br><br>
<form class="layui-form" onsubmit="return false;">
    <div class="layui-form-item">
        <label class="layui-form-label">商品标题</label>
        <div class="layui-input-block">
            <input type="text" id="name" name="name" autocomplete="off" placeholder="请输入标题"
                   class="layui-input" readonly="readonly">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">商品类别</label>
            <div class="layui-input-block">
                <input type="text" id="type" name="type" autocomplete="off" placeholder="请输入标题"
                       class="layui-input" readonly="readonly">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <input type="text" id="status" name="status" autocomplete="off" placeholder="请输入状态"
                       class="layui-input" readonly="readonly">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">编号</label>
            <div class="layui-input-block">
                <input type="text" id="code" name="code" autocomplete="off" placeholder="请输入编号"
                       class="layui-input" readonly="readonly">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">一口价</label>
            <div class="layui-input-block">
                <input type="text" id="price" name="price" autocomplete="off" placeholder="请输入一口价"
                       class="layui-input" readonly="readonly">
            </div>
        </div>
    </div>
    
    <fieldset class="layui-elem-field layui-field-title">
        <legend>以下部分为款式</legend>
    </fieldset>
    <div id="modelList">

    </div>
    <br><br><br>
    <div class="layui-form-item" style="text-align: center">
        <!--<div class="layui-inline">
            <button class="layui-btn layui-btn-fluid" onclick="addStyleModel()">添加款式</button>
        </div>
        <div class="layui-inline">
            <button class="layui-btn layui-btn-warm" onclick="addGoods()">提交</button>
        </div>-->
    </div>
    <br>
</form>
<script>
    layui.use(['jquery'], function () {
        var $ = layui.$;
        var id = (window.location.href).split("?id=")[1];
        $.ajax({
            type: 'GET',
            url: '/goods/getGoodsInfo',
            dataType: 'json',
            data:{
                id: id
            },
            success: function (res) {
                $("#name").val(res.data.baseGoods.name);
                $("#code").val(res.data.baseGoods.code);
                $("#price").val(res.data.baseGoods.price);
                $("#status").val(res.data.baseGoods.status);
                $("#type").val(res.data.typeName);
                var styles = res.data.goodsStyles;
                for (var i=0;i<styles.length;i++){
                    $("#modelList").append(getHtml(styles[i],i+1));
                }
            }
        });

        var getHtml = function (style,index) {
            var value = {
                sname: 'value="'+style.name+'"',
                price: 'value="'+style.price+'"',
                unit: 'value="'+style.unit+'"',
                weight: 'value="'+style.weight+'"',
                stype: 'value="'+style.type+'"',
                material: 'value="'+style.material+'"',
                scode: 'value="'+style.code+'"',
                balance: 'value="'+style.balance+'"',
                supplierName: 'value="'+style.supplierName+'"',
                supplierUrl: 'value="'+style.supplierUrl+'"',
                balanceWarn: 'value="'+style.balanceWarn+'"',
                balanceError: 'value="'+style.balanceError+'"',
                note: 'value="'+style.note+'"',
            }
            var imgPath;
            if (style.imgPath.charAt(0) == '/'){
                imgPath  = 'http://'+window.location.host + style.imgPath;
            }else {
                imgPath = style.imgPath;
            }
            return '<div class="layui-form-item">' +
                    '<div class="layui-inline">' +
                    '<label class="layui-form-label">款式名称</label>' +
                    '<div class="layui-input-block">' +
                    '<input type="text" id="sname' + index + '" name="sname' + index + '" autocomplete="off" placeholder="请输入标题"' +
                    'class="layui-input" '+value.sname+'  readonly="readonly">' +
                    '</div>' +
                    '</div>' +
                    '<div class="layui-inline">' +
                    '<label class="layui-form-label">单价</label>' +
                    '<div class="layui-input-block">' +
                    '<input type="text" id="price' + index + '" name="price' + index + '" autocomplete="off" placeholder="请输入单价"' +
                    'class="layui-input" '+value.price+'  readonly="readonly">' +
                    '</div>' +
                    '</div>' +
                    '<div class="layui-inline">' +
                    '<label class="layui-form-label">单位</label>' +
                    '<div class="layui-input-block">' +
                    '<input type="text" id="unit' + index + '" name="unit' + index + '" autocomplete="off" placeholder="请输入该单价下计量单位"' +
                    'class="layui-input"  '+value.unit+'  readonly="readonly">' +
                    '</div>' +
                    '</div>' +
                    '<div class="layui-inline">' +
                    '<label class="layui-form-label">重量</label>' +
                    '<div class="layui-input-block">' +
                    '<input type="text" id="weight' + index + '" name="weight' + index + '" autocomplete="off"' +
                    'placeholder="重量单位(kg)"' +
                    'class="layui-input"  '+value.weight+'  readonly="readonly">' +
                    '</div>' +
                    '</div>' +
                    '</div>' +
                    '<div class="layui-form-item">' +
                    '<div class="layui-inline">' +
                    '<label class="layui-form-label">类型</label>' +
                    '<div class="layui-input-block">' +
                    '<input type="text" id="stype' + index + '" name="stype' + index + '" autocomplete="off" placeholder="请输入类型"' +
                    'class="layui-input"  '+value.stype+'  readonly="readonly">' +
                    '</div>' +
                    '</div>' +
                    '<div class="layui-inline">' +
                    '<label class="layui-form-label">材质</label>' +
                    '<div class="layui-input-block">' +
                    '<input type="text" id="material' + index + '" name="material' + index + '" autocomplete="off"' +
                    'placeholder="请输入材质"' +
                    'class="layui-input"  '+value.material+'  readonly="readonly">' +
                    '</div>' +
                    '</div>' +
                    '<div class="layui-inline">' +
                    '<label class="layui-form-label">编号</label>' +
                    '<div class="layui-input-block">' +
                    '<input type="text" id="scode' + index + '" name="scode' + index + '" autocomplete="off"' +
                    'placeholder="编号将用于微信扫码"' +
                    'class="layui-input"  '+value.scode+'  readonly="readonly">' +
                    '</div>' +
                    '</div>' +
                    '<div class="layui-inline">' +
                    '<label class="layui-form-label">剩余库存</label>' +
                    '<div class="layui-input-block">' +
                    '<input type="text" id="balance' + index + '" name="balance' + index + '" autocomplete="off"' +
                    'placeholder="剩余库存即总库存"' +
                    'class="layui-input"  '+value.balance+'  readonly="readonly">' +
                    '</div>' +
                    '</div>' +
                    '</div>' +
                    '<div class="layui-form-item">' +
                    '<div class="layui-inline">' +
                    '<label class="layui-form-label">供应商</label>' +
                    '<div class="layui-input-block">' +
                    '<input type="text" id="supplierName' + index + '" name="supplierName' + index + '" autocomplete="off"' +
                    'placeholder="请输入供应商"' +
                    'class="layui-input"  '+value.supplierName+'  readonly="readonly">' +
                    '</div>' +
                    '</div>' +
                    '<div class="layui-inline">' +
                    '<label class="layui-form-label">供应商地址</label>' +
                    '<div class="layui-input-block">' +
                    '<input type="text" id="supplierUrl' + index + '" name="supplierUrl' + index + '" autocomplete="off"' +
                    'placeholder="供应商地址"' +
                    'class="layui-input"  '+value.supplierUrl+'  readonly="readonly">' +
                    '</div>' +
                    '</div>' +
                    '<div class="layui-inline">' +
                    '<img src ="'+imgPath+'" width="100" height="100" >'+
                    '</div>' +
                    '</div>' +
                    '<div class="layui-form-item">' +
                    '<div class="layui-inline">' +
                    '<label class="layui-form-label">黄色预警</label>' +
                    '<div class="layui-input-block">' +
                    '<input type="text" id="balanceWarn' + index + '" name="balanceWarn' + index + '" autocomplete="off"' +
                    'placeholder="请输入预警阈值"' +
                    'class="layui-input"  '+value.balanceWarn+'  readonly="readonly">' +
                    '</div>' +
                    '</div>' +
                    '<div class="layui-inline">' +
                    '<label class="layui-form-label">红色预警</label>' +
                    '<div class="layui-input-block">' +
                    '<input type="text" id="balanceError' + index + '" name="balanceWarn' + index + '" autocomplete="off"' +
                    'placeholder="请输入预警阈值"' +
                    'class="layui-input"  '+value.balanceError+'  readonly="readonly">' +
                    '</div>' +
                    '</div>' +
                    '</div>' +
                    '<label class="layui-form-label">备注</label>' +
                    '<div class="layui-input-block">' +
                    '<input type="text" id="note' + index + '" name="note' + index + '" autocomplete="off"' +
                    'placeholder="备注"' +
                    'class="layui-input"  '+value.note+'  readonly="readonly">' +
                    '</div>' + '<br>' +
                    '<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">' +
                    '<legend>以上为第' + index + '个款式</legend>' +
                    '</fieldset><br>'
        }
    })
</script>
</body>
</html>